<template>
    <div>
        <input type="text" v-model="text">

        <select v-model="select">
            <option value="aaa">aaa</option>
            <option value="bbb">bbb</option>
            <option value="ccc">ccc</option>
            <option value="ddd">ddd</option>
        </select>
    </div>
</template>

<script>
import { ref, watch } from 'vue'
export default {
    setup(){
        const text = ref("")

        const select = ref("aaa")

        // ----写法1
        //watch监听函数 newValue新值,oldValue旧值
        watch(text,(newValue,oldValue)=>{
            console.log("newValue:",newValue,"oldValue:",oldValue);
        })

        //----写法2
        watch(()=>text.value,(newValue,oldValue)=>{
            console.log("newValue:",newValue,"oldValue:",oldValue);
        })


        //----传入数组监听多个数据源 
        watch([text,select],(newValue,oldValue)=>{
            console.log("newValue:",newValue,"oldValue:",oldValue);
        })

        //----加载立即触发，immediate
        watch([text,select],(newValue,oldValue)=>{
            console.log("newValue:",newValue,"oldValue:",oldValue);
        },{immediate:true})



        return{
            text,
            select
        }
    }
}
</script>

<style>

</style>